<!-- Template for Association, Aggregation and Composition -->
<table class="editor_table">
    <tr>
        <td class="editor_header" id="AssociationEditorHeader">Association</td>
        <td class="editor_header_right">
            <img src="media/icons/icon_trash_16px.png" class="editor_list_trash_button" 
                 onclick="project.currentEditor.evDeleteDiagramElement();"
                 title="Remove association from diagram"/>
            <img src="media/icons/icon_trash_red_16px.png" class="editor_list_trash_button" 
                 onclick="project.currentEditor.evDeleteModel();"
                 title="Delete association"/>
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Name:</td>
        <td class="editor_right_column">
            <input type="text" id="AssociationAttributeName" 
                   onkeyup="project.currentEditor.evPropertyChanged('name', this.value);">
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Kind:</td>
        <td class="editor_right_column">
            <select id="AssociationAttributeType" 
                    onchange="project.currentEditor.evPropertyChanged('type', this.value);">
                <option value="association">Association</option>
                <option value="aggregation">Aggregation</option>
                <option value="composition">Composition</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Source&nbsp;End:</td>
        <td class="editor_right_column"><input type="text" id="AssociationAttributeSource" readonly disabled></td>
    </tr>
    <tr>
        <td class="editor_left_column">Target&nbsp;End:</td>
        <td class="editor_right_column"><input type="text" id="AssociationAttributeTarget" readonly disabled/></td>
    </tr>
    
    <tr>
        <td colspan="2">
            <hr/>
        </td>
    </tr>

    <tr class="editor_header">
        <td colspan="2">Source End</td>
    </tr>
    <tr>
        <td class="editor_left_column">Name:</td>
        <td class="editor_right_column">
            <input type="text" id="AssociationSourceEndAttributeName" 
                   onkeyup="project.currentEditor.evPropertyChanged('srcName', this.value);">
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Visibility:</td>
        <td class="editor_right_column">
            <select id="AssociationSourceEndAttributeVisibility" 
                    onchange="project.currentEditor.evPropertyChanged('srcVisibility', this.value);">
                <option value="+">Public</option>
                <option value="#">Protected</option>
                <option value="-">Private</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Multiplicity:</td>
        <td class="editor_right_column">
            <input type="text" id="AssociationSourceEndAttributeMultiplicity" 
                   onkeyup="project.currentEditor.evPropertyChanged('srcMultiplicity', this.value);">
        </td>
    </tr>  
    <tr>
        <td class="editor_left_column">IsNavigable:</td>
        <td class="editor_right_column">
            <select id="AssociationSourceEndAttributeIsNavigable" 
                    onchange="project.currentEditor.evPropertyChanged('srcIsNavigable', this.value);">
                <option value="true">True</option>
                <option value="false">False</option>
            </select>
        </td>
    </tr>

    <tr>
        <td colspan="2">
            <hr/>
        </td>
    </tr>
    
    <tr class="editor_header">
        <td colspan="2">Target End</td>
    </tr>
    <tr>
        <td class="editor_left_column">Name:</td>
        <td class="editor_right_column">
            <input type="text" id="AssociationTargetEndAttributeName" 
                   onkeyup="project.currentEditor.evPropertyChanged('trgName', this.value);">
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Visibility:</td>
        <td class="editor_right_column">
            <select id="AssociationTargetEndAttributeVisibility" 
                    onchange="project.currentEditor.evPropertyChanged('trgVisibility', this.value);">
                <option value="+">Public</option>
                <option value="#">Protected</option>
                <option value="-">Private</option>
            </select>
        </td>
    </tr>
    <tr>
        <td class="editor_left_column">Multiplicity:</td>
        <td class="editor_right_column">
            <input type="text" id="AssociationTargetEndAttributeMultiplicity" 
                   onkeyup="project.currentEditor.evPropertyChanged('trgMultiplicity', this.value);">
        </td>
    </tr>  
    <tr>
        <td class="editor_left_column">IsNavigable:</td>
        <td class="editor_right_column">
            <select id="AssociationTargetEndAttributeIsNavigable" 
                    onchange="project.currentEditor.evPropertyChanged('trgIsNavigable', this.value);">
                <option value="true">True</option>
                <option value="false">False</option>
            </select>
        </td>
    </tr>
    
    <tr>
        <td colspan="2">
            <hr/>
        </td>
    </tr>
    
    <tr>
        <td class="editor_header">Stereotypes</td>
        <td class="editor_header_right">
            <img src="media/icons/icon_add_16px.png" class="editor_list_add_button" 
                 onclick="project.currentEditor.evNewStereotype();"
                 title="Create new stereotype"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <table id="AssociationAttributeStereotypeList" class="editor_list_table">
                <!-- Stereotypes go here -->
            </table>
        </td>
    </tr>
</table>